<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <span class="addCustomerText">地址管理</span>
                </el-col>
                <el-col :span="18">
                    <el-row type="flex" justify="end">
                        <!-- 
                        <el-button v-show="customerCid && active !== 1" @click="prevSteps">上一步
                        </el-button>

                        <el-button v-show="customerCid && active !== 3" type="primary" @click="nextSteps">下一步
                        </el-button> -->
                        <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
                        <el-button @click="goaback">返回</el-button>
                    </el-row>
                </el-col>
            </el-row>
            <!-- 地址信息 -->
            <div>
                <!-- 地址信息填写 -->
                <el-form ref="addressFormRef" :rules="addAddressRules" :model="addressForm" label-width="120px"
                    style="margin-top: 20px">
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <el-form-item label="国家: " prop="reciver_country">
                                <el-input v-model="addressForm.reciver_country" placeholder="请输入国家" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="邮政编码: " prop="reciver_email_code">
                                <el-input v-model="addressForm.reciver_email_code" placeholder="请输入邮政编码" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="收件人: " prop="reciver_name">
                                <el-input v-model="addressForm.reciver_name" placeholder="请输入收件人" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <el-form-item label="联系电话: " prop="reciver_phone">
                                <el-input v-model="addressForm.reciver_phone" placeholder="请输入联系电话" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系邮箱: " prop="reciver_email">
                                <el-input v-model="addressForm.reciver_email" placeholder="请输入联系邮箱" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="详细地址: " prop="reciver_address_detail">
                                <el-input v-model="addressForm.reciver_address_detail" placeholder="请输入详细地址" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="handleSave">保存地址信息</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 地址列表 -->
                <vxe-grid ref="formRef" border background resizable max-height="480" align="center"
                    :columns="addressTableColumn" :data="addressTabelData" :loading="loading"
                    :row-config="{ height: 43, isCurrent: true, isHover: true }" show-overflow>
                    <!-- 行操作按钮 -->
                    <template #grid_opration="{ row, column, $rowIndex, $columnIndex }">
                        <el-button v-for="(item, i) in optColumnButtonList" :key="'opt_' + row.id + '_' + i" type="text"
                            @click="
                                toolbarButtonCallBack(
                                    row,
                                    column,
                                    $rowIndex,
                                    $columnIndex,
                                    item.clickFn
                                )
                            ">
                            {{ item.title }}
                        </el-button>
                    </template>
                    <!-- 分页器 -->
                    <!-- <template #pager>
                        <vxe-pager :layouts="[
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextJump',
                            'FullJump',
                            'Total',
                        ]" :current-page.sync="tablePage.page_num" :page-size.sync="tablePage.page_amounts"
                            :total="tablePage.total" @page-change="handlePageChange" />
                    </template> -->
                </vxe-grid>
            </div>
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog :visible="showEditDialog" title="编辑地址">
            <el-form :rules="editAddressRules" ref="editAddressRef" :model="editAddress" label-width="80px">
                <el-form-item label="国家" prop="reciver_country">
                    <el-input placeholder="请输入国家" v-model="editAddress.reciver_country"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" prop="reciver_email_code">
                    <el-input placeholder="请输入邮政编码" v-model="editAddress.reciver_email_code"></el-input>
                </el-form-item>
                <el-form-item label="收件人" prop="reciver_name">
                    <el-input placeholder="请输入收件人" v-model="editAddress.reciver_name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="reciver_phone">
                    <el-input placeholder="请输入联系电话" v-model="editAddress.reciver_phone"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="reciver_address_detail">
                    <el-input placeholder="请输入详细地址" v-model="editAddress.reciver_address_detail"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱" prop="reciver_email">
                    <el-input placeholder="请输入联系邮箱" v-model="editAddress.reciver_email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleConfirm">确认</el-button>
                    <el-button @click="handleCancle">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getCustomerDetailAPI, addAddressAPI, getAddressListAPI, deleteAddressAPI, getAddressDetailAPI, editAddressAPI } from '@/api/customer'
export default {
    props: {
        customerCid: {
            // type: Number,
            required: true
        }
    },
    data() {
        return {
            addressTableColumn: [
                // { type: 'checkbox', width: 50 },
                { type: 'seq', title: '序号', width: 60 },
                { field: 'reciver_country', title: '国家' },
                { field: 'reciver_email_code', title: '邮政编码' },
                { field: 'reciver_name', title: '收件人' },
                { field: 'reciver_phone', title: '联系电话' },
                { field: 'reciver_address_detail', title: '详细地址' },
                { field: 'reciver_email', title: '联系邮箱' },
                {
                    field: '',
                    title: '操作',

                    fixed: 'right',
                    slots: { default: 'grid_opration' }
                }
            ],
            optColumnButtonList: [
                { type: 'edit', title: '编辑', clickFn: this.handleEdit },
                { type: 'delete', title: '删除', clickFn: this.handleDelAddress },
            ],
            addressForm: {
                reciver_country: '',
                reciver_email_code: '',
                reciver_name: '',
                reciver_phone: '',
                reciver_email: '',
                reciver_address_detail: '',
            },
            addressTabelData: [],
            loading: false,
            showEditDialog: false,

            editAddress: {
                reciver_country: '',
                reciver_email_code: '',
                reciver_name: '',
                reciver_phone: '',
                reciver_address_detail: '',
                reciver_email: '',
            },

            addAddressRules: {
                reciver_country: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_email_code: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_name: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_phone: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_address_detail: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_email: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ]
            },
            editAddressRules: {
                reciver_country: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_email_code: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_name: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_phone: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_address_detail: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ],
                reciver_email: [
                    { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
                ]
            },
        }
    },
    mounted() {
        if (this.customerCid) {
            this.loading = true
            this.getCustomerDetail(this.customerCid)
            this.getAddressList(this.customerCid)
        }
    },
    methods: {
        // 获取客户详情
        async getCustomerDetail(customerCid) {
            const res = await getCustomerDetailAPI(customerCid)
            res.data.customer_main_chat_ways = res.data.customer_main_chat_ways.split(',')
            this.customerForm = res.data
        },

        // 获取地址列表
        async getAddressList(customerCid) {

            const res = await getAddressListAPI({ cid: customerCid });
            if (res.code === 200) {
                this.addressTabelData = res.data_list
                this.loading = false
            }
        },

        // 列表中的操作按钮触发的回调
        toolbarButtonCallBack(row, column, rowIndex, columnIndex, clickFn) {
            if (clickFn) {
                window.setTimeout(() => {
                    clickFn(row, column, rowIndex, columnIndex)
                }, 50)
            }
        },

        // 点击返回
        goaback() {
            this.$emit('goback')
        },

        // 重置
        handleReset() {
            this.$refs.addressFormRef.resetFields()
        },

        // 保存
        async handleSave() {
            try {
                await this.$refs.addressFormRef.validate()
                this.loading = true
                const res = await addAddressAPI({
                    cid: this.customerCid,
                    ...this.addressForm
                })
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.getAddressList(this.customerCid)
                    this.handleReset()
                }
            } catch (error) {

            }
        },

        // 删除地址
        handleDelAddress(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    this.loading = true
                    const res = await deleteAddressAPI({ aid: row.aid })
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.getAddressList(this.customerCid)
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        // 编辑弹窗
        async handleEdit(row) {
            this.showEditDialog = true
            const res = await getAddressDetailAPI(row.aid)
            this.editAddress = res.data
        },

        // 确认
        async handleConfirm() {
            try {
                await this.$refs.editAddressRef.validate()
                const res = await editAddressAPI(this.editAddress)
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.getAddressList(this.customerCid)
                    this.showEditDialog = false
                    this.loading = true
                }
            } catch (error) {
            }
        },

        // 取消
        handleCancle() {
            this.showEditDialog = false
        }

    }
}
</script>

<style lang="scss" scoped>
.addCustomerText {
    color: #1ecba3;
    font-size: 22px;
}
</style>